<template>
    <div>
        <div class="filter-container">
            <el-form label-position="left" :inline="true">
                <el-form-item label="渠道类型">
                    <select-app-source-type v-model="search.source_type" :multiple="true"></select-app-source-type>
                </el-form-item>
                <el-form-item label="渠道">
                    <select-app-source v-model="search.source" :type="search.source_type" multiple></select-app-source>
                </el-form-item>
                <el-form-item label="优化师" prop="spreadUser">
                    <select-spread-user v-model="search.spreadUser" :multiple="true"></select-spread-user>
                </el-form-item>
                <el-form-item title="日期" prop="day">
                    <el-date-picker
                        :clearable="false"
                        v-model="search.day"
                        type="daterange"
                        value-format="yyyy-MM-dd"
                        placeholder="选择日期"
                        style="width: 210px;">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="">
                    <el-button class="filter-item" icon="el-icon-search" type="primary" :loading="loading" @click="initSearch()">搜索</el-button>
                    <el-button class="filter-item" @click="exportExcel" v-if="$ENABLE_EXPORT">导出本页</el-button>
                </el-form-item>
            </el-form>
        </div>

        <vxe-table
            :loading="loading"
            ref="xTable"
            highlight-hover-row
            style="width: 100%"
            class="text-center"
            show-footer
            :footer-method="footerMethod"
            :max-height="maxHeight">
            <vxe-table-column title="日期" field="day" min-width="120" fixed="left"/>
            <vxe-table-column title="推广费" field="spreadCost" formatter="formatHumanRmb" min-width="110" fixed="left"/>
            <vxe-table-column title="活跃人数" field="loginUser" formatter="formatHuman" min-width="80"/>
            <vxe-table-column title="DAU-注册" field="loginOldUser" formatter="formatHuman" min-width="80"/>
            <vxe-table-column title="激活人数" field="authAllowUser" formatter="formatHuman" min-width="80"/>
            <vxe-table-column title="注册人数" field="registerUser" formatter="formatHuman" min-width="80"/>
            <vxe-table-column title="注册率" field="registerScale" formatter="formatPercent" min-width="80"/>
            <vxe-table-column title="注册成本" field="registerCost" :formatter="['formatHumanRmb', 2]" min-width="80"/>
            <vxe-table-column title="新增ARPPU" field="arppuFirst" :formatter="['formatHumanRmb', 2]" width="90"/>
            <vxe-table-column title="新增ARPU" field="arpuFirst" :formatter="['formatHumanRmb', 2]" width="80"/>
            <vxe-table-column title="48H人数" field="payFirstOldUser48" formatter="formatHuman" min-width="70"/>
            <vxe-table-column title="48H成本" field="payFirstOldUser48Cost" formatter="formatHumanRmb" min-width="70"/>
            <vxe-table-column title="首日充值人数" field="payFirstUser" formatter="formatHuman" min-width="100"/>
            <vxe-table-column title="首日充值率" field="payFirstUserScale" formatter="formatPercent" min-width="90"/>
            <vxe-table-column title="首日充值成本" field="payFirstCost" :formatter="['formatHumanRmb', 1]" min-width="100"/>
            <vxe-table-column title="首日充值金额" field="payFirst" formatter="formatHumanRmb" min-width="100"/>
            <vxe-table-column title="首日积分" field="thirdExchangeFirst" :formatter="['formatW', 1]" min-width="90"/>
            <vxe-table-column title="首日积分人数" field="thirdExchangeFirstUser" formatter="formatHuman" min-width="100"/>
            <vxe-table-column title="首日积分率" field="thirdExchangeFirstUserScale" formatter="formatPercent" min-width="80" :class-name="columnClass"/>
            <vxe-table-column title="首日积分转化率" field="payFirstUserThirdExchangeFirstUserScale" formatter="formatPercent" min-width="80" :title-help="{message: '首日充值人数/首日积分人数'}"/>
            <vxe-table-column title="首日实际ROI" field="roiFirst" :formatter="['formatPercent', 2]" min-width="100"/>
            <vxe-table-column title="首日市场ROI" field="roiMarketFirst" :formatter="['formatPercent', 2]" min-width="100"/>
            <vxe-table-column title="充值人数" field="payUser" formatter="formatHuman" min-width="80"/>
            <vxe-table-column title="充值率" field="payUserScale" formatter="formatPercent" min-width="90"/>
            <vxe-table-column title="充值金额" field="pay" formatter="formatHumanRmb" min-width="90"/>
            <vxe-table-column title="总积分人数" field="thirdExchangeUser" formatter="formatHuman" min-width="80"/>
            <vxe-table-column title="总积分" field="thirdExchange" :formatter="['formatW', 1]" min-width="90"/>
            <vxe-table-column title="总积分率" field="thirdExchangeUserScale" formatter="formatPercent" min-width="80"/>
            <vxe-table-column title="积分占比" field="thirdExchangePayScale" :formatter="['formatPercent', 2]" min-width="80"/>
            <vxe-table-column title="ARPPU" field="arppu" :formatter="['formatHumanRmb', 2]" min-width="80"/>
            <vxe-table-column title="ARPU" field="arpu" :formatter="['formatHumanRmb', 2]" min-width="80"/>
            <vxe-table-column title="实际ROI" field="roi" :formatter="['formatPercent', 2]" min-width="80"/>
            <vxe-table-column title="市场ROI" field="roiMarket" :formatter="['formatPercent', 2]" min-width="80"/>
<!--            <vxe-table-column title="运营毛利" field="operationProfit" formatter="formatHumanRmb" min-width="100" :title-help="{message: '充值 - 充值通道费用 - 推广费'}"/>-->
<!--            <vxe-table-column title="权益通道费用" field="withdrawChannelFee" formatter="formatHumanRmb" min-width="100"/>-->
            <vxe-table-column title="支付宝充值金额" field="payAlipay" formatter="formatHumanRmb" min-width="110"/>
            <vxe-table-column title="支付宝通道费用" field="payChannelFeeAlipay" formatter="formatHumanRmb" min-width="110"/>
            <vxe-table-column title="微信充值金额" field="payWechat" formatter="formatHumanRmb" min-width="100"/>
<!--            <vxe-table-column title="微信通道费用" field="payChannelFeeWechat" formatter="formatHumanRmb" min-width="100"/>-->
            <vxe-table-column title="去新增充值人数" field="payOldUser" formatter="formatHuman" min-width="80"/>
            <vxe-table-column title="去新增充值金额" field="payOld" formatter="formatHumanRmb" min-width="90"/>
            <vxe-table-column title="去新增ARPPU" field="arppuOld" :formatter="['formatHumanRmb', 2]" width="100"/>
            <vxe-table-column title="去新增ARPU" field="arpuOld" :formatter="['formatHumanRmb', 2]" width="100"/>
        </vxe-table>

    </div>
</template>

<script>
import SelectAppSourceType from '~/components/Select/app-source-type';
import SelectSpreadUser from '~/components/Select/spread-user';

export default {
    components: {
        SelectAppSourceType,
        SelectSpreadUser,
    },
    data() {
        return {
            search: {
                source: [],
                spreadUser: [],
                source_type: [],
                day: [],
            },
            loading: false,
            selected: [],
            tableData: [],
            pageNo: 1,
            pageSize: 50,
            totalDataNumber: 0,
            pageOptions: this.$store.state.backend.pageOptions,
            pageCount: 0,
            options: this.$store.state.operation.options.bulletLog,
        }
    },
    computed: {
        maxHeight() {
            return this.$store.state.backend.windowInnerHeight - 220;
        },
    },
    methods: {
        handleSizeChange(val) {
            this.pageNo = 1;
            this.pageSize = parseInt(`${val}`);
            this.handleSearch();
        },
        handleCurrentChange(val) {
            this.pageNo = parseInt(`${val}`);
            this.handleSearch();
        },
        handleSelectionChange(val) {
            this.selected = val;
        },
        handleSearch() {
            this.loading = true;
            let filter = Object.assign({}, this.search, {
                page: this.pageNo,
                pageSize: this.pageSize,
            });
            this.$store.dispatch('spreadData/DailyAll', filter).then(({data}) => {
                this.$refs.xTable.reloadData(data)
                // this.totalDataNumber = data.meta.total;
            }).finally(() => {
                this.loading = false;
            });
        },
        initData() {
            this.initSearchDate();
            this.handleSearch();
        },
        initSearchDate() {
            this.search.day = [
                moment().add(-1, 'M').format('yyyy-MM-DD'),
                moment().endOf('d').format('yyyy-MM-DD'),
            ];
        },
        initSearch() {
            this.pageNo = 1;
            this.handleSearch();
        },
        exportExcel () {
            this.$refs.xTable.exportData({
                filename: '推广数据-' + this.$route.meta.title,
                type: 'xlsx'
            })
        },
        footerMethod({ columns, data }) {
            let loginOldUser = 0;
            data.map(v => loginOldUser += v.loginOldUser);

            return this.$helper.vxeFooter(columns, data, null, (sums, allFields) => {
                // 计算 payUserScale
                sums[allFields.payUserScale] = this.$helper.calcDivision(sums[allFields.payUser], sums[allFields.loginUser]);
                // 计算 payFirstUserScale
                sums[allFields.payFirstUserScale] = this.$helper.calcDivision(sums[allFields.payFirstUser], sums[allFields.registerUser]);
                // 计算 thirdExchangeUserScale
                sums[allFields.thirdExchangeUserScale] = this.$helper.calcDivision(sums[allFields.thirdExchangeUser], sums[allFields.loginUser]);
                // 计算 thirdExchangeFirstUserScale
                sums[allFields.thirdExchangeFirstUserScale] = this.$helper.calcDivision(sums[allFields.thirdExchangeFirstUser], sums[allFields.registerUser]);
                // 计算 registerCost
                sums[allFields.registerCost] = this.$helper.calcDivision(sums[allFields.spreadCost], sums[allFields.registerUser]);
                // 计算 arpu
                sums[allFields.arpu] = this.$helper.calcDivision(sums[allFields.pay], sums[allFields.loginUser]);
                // 计算 arppu
                sums[allFields.arppu] = this.$helper.calcDivision(sums[allFields.pay], sums[allFields.payUser]);
                // 计算 新增arpu
                sums[allFields.arpuFirst] = this.$helper.calcDivision(sums[allFields.payFirst], sums[allFields.registerUser]);
                // 计算 新增arppu
                sums[allFields.arppuFirst] = this.$helper.calcDivision(sums[allFields.payFirst], sums[allFields.payFirstUser]);
                // 计算 去新增arpu
                sums[allFields.arpuOld] = this.$helper.calcDivision(sums[allFields.payOld], loginOldUser);
                // 计算 去新增arppu
                sums[allFields.arppuOld] = this.$helper.calcDivision(sums[allFields.payOld], sums[allFields.payOldUser]);
                // 计算 roi
                sums[allFields.roi] = this.$helper.calcDivision((sums[allFields.pay] - sums[allFields.thirdExchange] / this.$CURRENCY_HB_SCALE * 100), sums[allFields.spreadCost]);
                // 计算 roiFirst
                sums[allFields.roiFirst] = this.$helper.calcDivision((sums[allFields.payFirst] - sums[allFields.thirdExchangeFirst] / this.$CURRENCY_HB_SCALE * 100), sums[allFields.spreadCost]);
                // 计算 市场roiMarket
                sums[allFields.roiMarket] = this.$helper.calcDivision(sums[allFields.pay], sums[allFields.spreadCost]);
                // 计算 市场roiMarketFirst
                sums[allFields.roiMarketFirst] = this.$helper.calcDivision(sums[allFields.payFirst], sums[allFields.spreadCost]);
                // 计算 payFirstCost
                sums[allFields.payFirstCost] = this.$helper.calcDivision(sums[allFields.spreadCost], sums[allFields.payFirstUser]);
                // 计算 payFirstOldUser48Cost
                sums[allFields.payFirstOldUser48Cost] = this.$helper.calcDivision(sums[allFields.spreadCost], sums[allFields.payFirstOldUser48]);
                // 计算 thirdExchangePayScale
                sums[allFields.thirdExchangePayScale] = this.$helper.calcDivision(sums[allFields.thirdExchange] / this.$CURRENCY_HB_SCALE * 100, sums[allFields.pay]);
                // 计算 registerScale
                sums[allFields.registerScale] = this.$helper.calcDivision(sums[allFields.registerUser], sums[allFields.authAllowUser]);
                // 计算 payFirstUserThirdExchangeFirstUserScale
                sums[allFields.payFirstUserThirdExchangeFirstUserScale] = this.$helper.calcDivision(sums[allFields.payFirstUser], sums[allFields.thirdExchangeFirstUser]);
                return sums;
            });
        },
        columnClass({row, column}) {
            // 绿色表示安全  红色为需要警戒
            if (column.property === 'thirdExchangeFirstUserScale') {
                if (!row.thirdExchangeFirstUserScale) return '';
                return (row.thirdExchangeFirstUserScale < 0.6) ? 'color-success' : 'color-danger';
            }
        },
    },
    created() {
        this.initData();
    }
}
</script>

<style lang="scss" scoped>
#app .el-form-item {
    margin-bottom: 0;
}
</style>

